<template>
  <div class="complaint">
    <!-- 选项卡 -->
    <el-tabs v-model="param.status">
      <el-tab-pane label="待仲裁" name="待仲裁"></el-tab-pane>
    </el-tabs>
    <!-- 投诉列表 -->
    <!-- 表格 -->
    <el-table
      :data="complaints"
      size="small"
      v-if="param.status=='待仲裁'"
    >
      <el-table-column label="#" type="index" :index="1" width="80"></el-table-column>
      <el-table-column label="订单号" prop="order.id" width="80"></el-table-column>
      <el-table-column label="员工" prop="order.employee.realname" width="70"></el-table-column>
      <el-table-column label="顾客" prop="order.customer.realname" width="90"></el-table-column>
      <el-table-column label="投诉时间" width="160">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{getTime(scope.row.commentTime)}}</span>
        </template>
      </el-table-column>
      <el-table-column label="评分" prop="score" width="70" align="center"></el-table-column>
      <el-table-column label="投诉" prop="content"></el-table-column>
      <el-table-column label="状态" prop="status" width="80"></el-table-column>
      <el-table-column label="操作" width="160" align="center">
        <template v-slot="scope">
          <el-button
            type="primary"
            size="mini"
            @click="check(scope.row)"
          >仲裁</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 表格结束 -->
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
export default {
  data() {
    return {
      param: {
        status: "待仲裁"
      },
      visible: false,
      complaints: []
    };
  },
  created() {
    this.loadComplaints();
  },
  watch: {
    // 监听param的变化，一旦变化立刻查询
    param: {
      handler: function() {
        this.loadComplaints();
      },
      deep: true
    }
  },
  methods: {
    // 加载投诉信息
    loadComplaints() {
      // 1. 克隆param
      let param = Object.assign({}, this.param);
      let url = "http://47.92.81.116:8888/check/queryComplaints"
      // 2. 处理数据
      get(url, param).then(response => {
        this.complaints = response.data;
      });
    },
    check(row){
      this.$confirm('将会进行仲裁并删除投诉, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 删除
        let url = "http://47.92.81.116:8888/check/arbitrate"
        get(url,{id:row.id}).then((response)=>{
          // 提示
          this.$message({type:'success',message:response.message})
          // 刷新数据
          this.loadComplaints();
        })
      })
    },
    getTime(time) {
      return new Date(parseInt(time))
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ");
    }
  },
};
</script>